{extend name="../../base/view/common/base" /}
<!-- 主体 -->
{block name="body"}
<div class="p-3">
    <div>
        <form class="layui-form gg-form-bar border-x border-t" lay-filter="barsearchform2">
            <div class="layui-input-inline" style="width:130px;">
                <input type="text" class="layui-input" id="ID-laydate-type-year" placeholder="{$year}" value="{$year}">
            </div>

            {if condition="$eid gt 0"}
            <input type="hidden" name="eid" value="{$eid}" lay-verify="required">
            {else/}
            <div class="layui-input-inline" style="width:300px" >
                <select name="eid" lay-verify="required" lay-filter="demo-select-filter" lay-reqText="请选择所属企业">
                    <option value="0">系统管理员</option>
                    {volist name="enterprise" id="v"}
                    <option value="{$v.id}" {notempty name="$detail.eid"} {eq name="$v.id" value="$detail.eid"} selected{/eq}{/notempty} >{$v.title}</option>
                    {/volist}
                </select>
            </div>
            {/if}
            <div class="layui-input-inline" style="width:150px;">
                <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform"><i
                        class="layui-icon layui-icon-search mr-1"></i>搜索
                </button>
            </div>

        </form>
    </div>
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief" lay-filter="demoTab">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="tab_active" style="font-size:15px;"><strong>工资</strong></li>
                <li style="font-size:15px;" lay-id="tab_active1"><strong>社保</strong></li>
                <li style="font-size:15px;" lay-id="tab_active2"><strong>公积金</strong></li>
            </ul>

            <div class="layui-tab-content" style="padding:0">
                <div class="layui-tab-item layui-show">
                    <table class="layui-hide" id="active" lay-filter="active"></table>
                </div>
                <div class="layui-tab-item">
                    <table class="layui-hide" id="active1" lay-filter="active"></table>
                </div>
                <div class="layui-tab-item">
                    <table class="layui-hide" id="active2" lay-filter="active"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="toolbarDemo">
<!--     <div class="layui-btn-container">-->
<!--        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe61f;</i>新建汇报</button>-->
<!--    </div>-->
</script>

<script type="text/html" id="barDemo">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="view">查看</button>
        <button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
    </div>
</script>
<script type="text/html" id="barDemo1">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="view">查看</button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
    </div>
</script>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
    const moduleInit = ['tool', 'employeepicker', 'laydatePlus'];

    function gouguInit() {
        var form = layui.form, table = layui.table, tool = layui.tool, laydatePlus = layui.laydatePlus, element = layui.element, laydate = layui.laydate, TableTitleData = [];
        let newDateYear = "{$year}";
        let ActiveTabID = 'active';
        let activeIndex = 1;
        const range = (start, stop, step) =>
            Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step);
        //年选择器
        laydate.render({
            elem: '#ID-laydate-type-year',
            type: 'year',
            value: "{$year}",
            id: 'laydate-year',
            done: function (value, date, endDate) {
                newDateYear = value;
                // console.log()
                // console.log(value); // 日期字符，如： 2017-08-18
                // console.log(date); // 包含年月日时分秒各项值的对象
                // console.log(endDate); // 结束日期时间对象，当设置 range 时才会返回。对象成员同上。
            }
        });
        //表头数据列
        let fieldList = [{ field: 'name', title: '姓名' },
        { field: 'educational', title: '学历' },
        { field: 'major', title: '专业' },
        { field: 'position', title: '岗位' }];
        function setTable() {
            let obj = { align: 'center' };
            TableTitleData = [];
            let month = range(1, 13, 1);
            fieldList.forEach(e => {
                e = { ...e, ...obj };
            })
            month.forEach(e => {
                TableTitleData.push(
                    // { field: 'm' + e, title: `${ e+'月 (元)'}`, align: 'center' }
                    { field: 'm' + e, title: `${e > 12 ? '合计 (元)' : e+'月 (元)'}`, align: 'center' }
                )
            })

        };
        //渲染表格
        function laydateRender(id = 'active') {
            var data = form.val('barsearchform2');
            setTable();
            layui[`${id}`] = table.render({
                toolbar: '#toolbarDemo',
                defaultToolbar: ['filter', {title: '导出EXCEL', layEvent: 'LAYTABLE_EXCEL', icon: 'layui-icon-export'}],
                title:'工资社保汇总',
                elem: `#${id}`,
                id,
                where:{
                    eid:data.eid,
                    date:newDateYear,
                    tab:activeIndex,

                },
                url: "/home/board/sl",
                cols: [[...fieldList, ...TableTitleData]],
                parseData: function (res) { // res 即为原始返回的数据
                    // table.reload(id)
                    return res;
                },
            })
        }
        laydateRender();
        element.on('tab(demoTab)', function (data) {
            console.log(data)
            ActiveTabID = this.getAttribute('lay-id').split('_')[1];
            activeIndex = data.index + 1;
            laydateRender(ActiveTabID);
        });
        //监听搜索提交
        form.on('submit(webform)', function (data) {
            let f = data.field;
            console.log(f)

            laydateRender(ActiveTabID)
            return false;
        });
        function addNew() {
            var type = [{ 'id': 1, 'title': '日报' }, { 'id': 2, 'title': '周报' }, { 'id': 3, 'title': '月报' }];
            layer.open({
                title: '选择汇报类型',
                type: 1,
                area: ['360px', '300px'],
                content: '<div style="width:325px; padding:15px 15px 0"><div id="selectCoursr"></div></div>',
                success: function () {
                    tableid = table.render({
                        elem: '#selectCoursr',
                        cols: [[ //标题栏
                            { type: 'radio', title: '选择' },
                            { field: 'title', title: '汇报类型' }
                        ]],
                        data: type
                    });
                },
                btn: ['确定'],
                yes: function (idx) {
                    var checkStatus = table.checkStatus(tableid.config.id);
                    var data = checkStatus.data;
                    if (data.length > 0) {
                        tool.side('/oa/work/add?type=' + data[0].id);
                        layer.close(idx);
                    } else {
                        layer.msg('请选择汇报类型');
                        return false;
                    }
                }
            })
        }

        //表头工具栏事件
        table.on('toolbar(active)', function (obj) {
            if (obj.event === 'LAYTABLE_EXCEL') {
                var formSelect = form.val('barsearchform2');
                formSelect.eid,
                formSelect.date=newDateYear,
                formSelect.tab=activeIndex,
                $.ajax({
                    url: '/home/board/sl',
                    data: formSelect,
                    success: function (res) {
                        table.exportFile('active', res.data, 'xlsx');
                    }
                });
                return;
            }
        });


    }
</script>
{/block}
<!-- /脚本 -->